﻿<form id="frmBXJGShopItem" class="frm-container">
    <input type="hidden" name="id" value="0" />
    <table class="frm-box">
        <tr>
            <th>名称</th>
            <td colspan="5">
                <input name="title" class="easyui-textbox" data-options="width:815, required:true, validType:'length[1,100]',prompt:'简短、准确的商品标题...'" />
            </td>
        </tr>
        <tr>
            <th>类别</th>
            <td>
                <input name="categoryId" class="easyui-combotree"
                       data-options="
                       required:true,
                       url:abp.appPath+'api/services/app/BXJGShopDictionary/GettreeForSelect',
                       queryParams: { forType: 4,ParentId:1 }" />
            </td>
            <th>品牌</th>
            <td>
                <input name="brandId" class="easyui-combobox"
                       data-options="
                       url:abp.appPath+'api/services/app/BXJGShopDictionary/GetNodesForSelect',
                       queryParams: { forType: 4,ParentId:2 }" />
            </td>
            <th>SKU</th>
            <td><input name="sku" class="easyui-textbox" data-options="validType:'length[0,100]'" /></td>
        </tr>
        <tr>
            <th>助记码</th>
            <td><input name="mnemonicCode" class="easyui-textbox" data-options="validType:'length[0,100]',prompt:'通常为拼音简码...'" /></td>
            <th>原价</th>
            <td><input name="oldPrice" class="easyui-numberspinner" data-options="prefix:'￥',precision:1,value:0" /></td>
            <th>现价</th>
            <td><input name="price" class="easyui-numberspinner" data-options="required:true,prefix:'￥',precision:1,value:0" /></td>
        </tr>
        <tr>
            <th>单位</th>
            <td>
                <input name="unitId" class="easyui-combobox"
                       data-options="
                       url:abp.appPath+'api/services/app/BXJGShopDictionary/GetNodesForSelect',
                       queryParams: { forType: 4,ParentId:5}" />
            </td>
            <th>积分</th>
            <td><input name="integral" class="easyui-numberspinner" data-options="value:0" /></td>



            <!--<th>供应商</th>
            <td>
                <select class="easyui-combogrid" name="supplierId"
                        data-options="
                                panelWidth:700,
                                idField:'id',
                                textField:'name',
                                prompt:'请选择(支持按名称/联系人/手机号/地址等模糊查询)',
                                url:'/api/services/app/btype/GetForSelect',
                                queryParams1: { forType: 2,id:71},
                                delay: 500,
                                mode: 'remote',
                                pagination:true,
                                columns:[[
                                    {field:'name',title:'名称',width:200},
                                    {field:'contact',title:'联系人',width:100},
                                    {field:'cellphone',title:'联系电话',width:100},
                                    {field:'areaText',title:'区域',width:100},
                                    {field:'industryText',title:'行业',width:100},
                                    {field:'address',title:'地址',width:100},
                                    {field:'remark',title:'备注',width:100}
                                ]]
                            "></select>
            </td>-->
            <th>焦点</th>
            <td><input class="easyui-checkbox" name="focus" value="true"></td>
        </tr>
        <tr>
            <th>热卖</th>
            <td><input class="easyui-checkbox" name="hot" value="true"></td>
            <th>新品</th>
            <td><input class="easyui-checkbox" name="new" value="true"></td>
            <th>首页显示</th>
            <td><input class="easyui-checkbox" name="home" value="true"></td>
        </tr>
        <tr>
            <th>发布</th>
            <td><input class="easyui-checkbox" name="published" data-options="value:true"></td>
            <th>发布开始时间</th>
            <td><input class="easyui-datetimebox" name="availableStart" data-options="showSeconds1:false"></td>
            <th>发布结束时间</th>
            <td><input class="easyui-datetimebox" name="availableEnd" data-options="showSeconds1:true"></td>
        </tr>

        <tr>
            <th class="top">封面图片</th>
            <td colspan="5" id="frmBXJGShopItemUploader" class="imgUploader-container" style=" padding:7px 0;">
                <div id="frmBXJGShopItemUploaderPicker" class="imgUploader-picker">选择图片</div>
                <div class="imgUploader-images" style="max-width:830px;">
                    <!--图片预览区，支持拖拽、截图粘贴...
                    <div class="imgUploader-img-container">
                        <a href="javascript:void(0);">×</a>
                        <img src="http://demo.dtcms.net/upload/201504/20/thumb_201504200119256512.jpg" />
                        <i class="imgUploader-img-success">上传完成</i>
                    </div>-->
                </div>
            </td>
        </tr>
        <tr>
            <th>简短描述</th>
            <td colspan="5"><input name="descriptionShort" class="easyui-textbox" data-options="width:820, validType:'length[1,100]',prompt:'显示在标题下方的商品简短描述信息...'" /></td>
        </tr>
        <tr>
            <th class="top">详细描述</th>
            <td colspan="5" style="padding-top:7px; ">
                <div id="bxjgShopItemEditor0" style="border: 1px solid #ddd;"></div>
                <div id="bxjgShopItemEditor" style="width:820px; height:600px;border: 1px solid #ddd;"></div>
            </td>
        </tr>
    </table>
</form>
<script>
    (function () {
        let m = 'BXJGShopItem';
        let $dlg = $('#dlg' + m);
        let $frm = $dlg.find('form');
        let id = $dlg.data('id');
        let $name = $frm.find('[name="name"]');
        let $mnemonicCode = $frm.find('[name="mnemonicCode"]');
        let $cls = $frm.find('[name="categoryId"]');
        let $brand = $frm.find('[name="brand"]');
        let $unit = $frm.find('[name="unit"]');
        let $uploader = $('#frmBXJGShopItemUploader');
        let $uploaderImages = $uploader.find('.imgUploader-images');
        //let attachment = $frm.find('.attachment');

        //attachment.jqEasyuiWebuploader(abp.file.buildJQUOA('BXJGShopItem', 'Administrator.Asset.BXJGShopItem.Create', 'Administrator.Asset.BXJGShopItem'));
        //let up = attachment.jqEasyuiWebuploader('webUploader');
        //let uploaderInitTask = attachment.jqEasyuiWebuploader('initTask');
        setTimeout(function () {
            $name.next('span').find('input').focus();
            var $realName = $frm.find('[name="name"]').prev();  //这里必须直接通过jquery做选择
            $realName.focus().blur(function () {
                var input = $name.val();
                if (!input)
                    return;
                if ($mnemonicCode.val())
                    return;
                abp.services.app.utils.getPY({ chinese: input }).done(function (d) {
                    $mnemonicCode.textbox('setValue', d);
                });
            });
        }, 0);

        $dlg.data('clickSave', function () {
            if (!$frm.form('validate'))
                return;
            var files = uploader.getFiles('complete');
            if (!files || files.length == 0) {
                abp.message.error('请至少上传一张封面图');
                return;
            }

            var postData = $frm.serializeJSON();
            postData.images = new Array();
            files.forEach(function (currentValue, index, arr) {
                postData.images.push(currentValue.serverPath);
            });
            postData.descriptionFull = editor.txt.html();
            console.log('提交的数据如下：');
            console.log(postData);
            var defer;
            if (id) {
                defer = abp.services.app.bXJGShopItem.update(postData).done(function (d) {
                    abp.notify.success(abp.localization.bxjgUtils('修改') + abp.localization.bxjgUtils('成功') + '!');
                    onSaved('onUpdated');
                });
            } else {
                defer = abp.services.app.bXJGShopItem.create(postData).done(function (d) {
                    abp.notify.success(abp.localization.bxjgUtils('新增') + abp.localization.bxjgUtils('修改') + '!');
                    onSaved('onAdded');
                });
            }
            abp.ui.setBusy($dlg, defer);
        });

        if (id) {
            abp.ui.setBusy($dlg, abp.services.app.BXJGShopItem.get({ id: id }).done(function (d) {
                $frm.form('load', d);
                if (d.attachments) {
                    //插件有点问题，初始化有部分东西是异步的，因此这里等一段时间
                    //保险的方式是插件提供初始化完成的回调函数
                    setTimeout(function () {
                        d.attachments.forEach(function (item, index) {
                            var obj = {
                                id: item.id,//这个好像也没什么卵用
                                name: item.name,
                                ext: item.extension.substring(1),//这行貌似没什么卵用，webuploader取文件名后缀
                                size: item.size
                            };
                            var file = new WebUploader.File(obj);
                            file.myData = file.myData || {};
                            file.myData.serverFileId = item.id;
                            file.myData.attachmentId = item.attachmentId;
                            file.setStatus('complete');
                            up.addFiles(file);
                        });
                    }, 500);
                }
            }));
        } else
            $cls.val($dlg.data('clsId'));//直接用val赋值，easyui初始化后会直接使用这个值初始化对应的控件

        function onSaved(funcName) {
            var f = $dlg.data(funcName);
            if (f)
                f();
        }


        //图片上传开始-------------------------------------
        let uploader = WebUploader.create({

            // 选完文件后，是否自动上传。
            auto: true,

            // swf文件路径
            swf: '/lib/webuploader-0.1.5/Uploader.swf',

            // 文件接收服务端。
            server: abp.appPath + 'api/file/upload',

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#frmBXJGShopItemUploaderPicker',

            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });
        uploader.on('uploadSuccess', function (file, response) {
            file.serverPath = response.result[0].relativePath;
        });
        uploader.on('fileQueued', function (file) {
            file.on('statuschange', function (n, o) {
                $i.removeClass('imgUploader-img-' + o);
                $i.addClass('imgUploader-img-' + n);
                let statusText = '';
                switch (n) {
                    case 'complete':
                        statusText = '已完成';
                        break;
                    case 'error':
                        statusText = '失败';
                        break;
                    case 'progress':
                        statusText = '上传中...';
                        break;
                    default:
                        statusText = file.statusText;
                }
                $i.text(statusText);
            });


            let $box = $('<div class="imgUploader-img-container">').appendTo($uploaderImages);
            let $a = $('<a>×</a>').appendTo($box);
            let $img = $('<img />').appendTo($box);
            let $i = $('<i />').appendTo($box);


            $a.on('click', function () {
                uploader.removeFile(file, true);
                $box.remove();
            });
            if (file.serverPath) {
                $img.attr('src', file.serverPath);
                file.setStatus('complete');
            } else {
                uploader.makeThumb(file, function (error, src) {
                    if (error) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }
                    $img.attr('src', src);
                });
            }
        });
        uploader.on('uploadBeforeSend', function (obj, data, headers) {
            headers.Authorization = "Bearer " + abp.getCurrentJWTToken();
        });

        //for (var i = 0; i < 3; i++) {
        //    let file1 = new WebUploader.File({
        //        size: 1,//经测试大于0的文件才会被加入队列
        //        name: 'http://demo.dtcms.net/upload/201504/20/thumb_201504200119256512.jpg'
        //    });
        //    file1.serverPath = 'http://demo.dtcms.net/upload/201504/20/thumb_201504200119256512.jpg';
        //    uploader.addFiles(file1);
        //}

        //图片上传结束-------------------------------------

        //富文本编辑器开始---------------------------------
        var E = window.wangEditor
        var editor = new E('#bxjgShopItemEditor0', '#bxjgShopItemEditor')
        // 或者 var editor = new E( document.getElementById('editor') )

        editor.customConfig.uploadImgShowBase64 = true;
        editor.create();
        //富文本编辑器结束---------------------------------
    })();
</script>
